<template>
  <div class="course-list-page">
    <!-- 顶部导航和搜索区 -->
    <div class="course-toolbar">
      <div class="course-title">
        <el-icon class="logo"><ChromeFilled /></el-icon>
        <span class="site-title">课程中心</span>
      </div>
      <div class="selects">
        <el-select
          v-model="selectedSubject"
          placeholder="课程分类"
          class="filter-item"
          clearable
          @change="handleFilter"
        >
          <el-option
            v-for="cat in categories"
            :key="cat"
            :label="cat"
            :value="cat"
          />
        </el-select>
        <el-select
          v-model="selectedLevel"
          placeholder="难度级别"
          class="filter-item"
          clearable
          @change="handleFilter"
        >
          <el-option
            v-for="level in levels"
            :key="level"
            :label="level"
            :value="level"
          />
        </el-select>
        <el-select
          v-model="selectedDuration"
          placeholder="时长"
          class="filter-item"
          clearable
          @change="handleFilter"
        >
          <el-option v-for="d in durations" :key="d" :label="d" :value="d" />
        </el-select>
        <el-select
          v-model="sortType"
          placeholder="排序"
          class="filter-item"
          @change="handleSort"
        >
          <el-option label="最新" value="latest" />
          <el-option label="最热" value="popular" />
          <el-option label="评分最高" value="rating" />
        </el-select>
      </div>
      <el-input
        v-model="searchQuery"
        placeholder="搜索课程/教师/关键词"
        class="search-input"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <!-- 课程内容展示区 -->
    <el-row :gutter="24" class="course-grid">
      <el-col
        v-for="course in pagedCourses"
        :key="course.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        class="course-col"
      >
        <div class="course-card" shadow="hover" @click="goDetail(course)">
          <div class="card-cover">
            <img :src="course.cover" alt="封面" />
            <div class="card-share">
              <el-tooltip content="收藏">
                <el-button
                  circle
                  size="small"
                  @click.stop="toggleFavorite(course)"
                  ><el-icon><StarFilled /></el-icon
                ></el-button>
              </el-tooltip>
              <el-tooltip content="分享">
                <el-button circle size="small" @click.stop="shareCourse(course)"
                  ><el-icon><Share /></el-icon
                ></el-button>
              </el-tooltip>
            </div>
          </div>
          <div class="card-content">
            <div class="card-title" :title="course.title">
              {{ course.title }}
            </div>
            <div class="card-meta">
              <el-avatar :src="course.teacherAvatar" size="small" />
              <span class="teacher-name">{{ course.teacher }}</span>
              <el-tag class="tag-capsule" type="info">{{
                course.subject
              }}</el-tag>
              <el-tag class="tag-capsule" type="success">{{
                course.level
              }}</el-tag>
              <el-tag class="tag-capsule" type="warning">{{
                course.duration
              }}</el-tag>
            </div>
            <div class="card-desc">{{ course.desc }}</div>
            <div class="card-info">
              <el-rate
                v-model="course.rating"
                disabled
                show-score
                :max="5"
                class="card-rate"
              />
              <el-tooltip content="评分人数" placement="top">
                <span class="rate-count">({{ course.ratingCount }})</span>
              </el-tooltip>
              <el-icon class="info-icon"><UserFilled /></el-icon>
              <el-tooltip content="学习人数" placement="top">
                <span class="student-num">{{ course.students }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="course-pagination">
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="total"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="handlePageChange"
        :hide-on-single-page="false"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import {
  Search,
  ChromeFilled,
  StarFilled,
  Share,
  UserFilled,
} from "@element-plus/icons-vue";
import { courseApi } from "../../api/courseApi";
import { ElMessage } from "element-plus";

const router = useRouter();
const searchQuery = ref("");
const selectedSubject = ref("");
const selectedLevel = ref("");
const selectedDuration = ref("");
const sortType = ref("latest");
const currentPage = ref(1);
const pageSize = ref(8);
const total = ref(0);

const categories = ["编程", "设计", "数学", "英语", "管理", "其他"];
const levels = ["初级", "中级", "高级"];
const durations = ["<1小时", "1-3小时", "3-6小时", ">6小时"];

const courses = ref([]);

async function fetchCourses() {
  try {
    const params = {
      pageNumber: currentPage.value,
      pageSize: pageSize.value,
      courseName: searchQuery.value,
      level: selectedLevel.value,
      subject: selectedSubject.value,
      duration: selectedDuration.value,
    };
    const res = await courseApi.getCoursePage(params);
    if (res.code === 1 && res.result) {
      total.value = res.result.total;
      courses.value = (res.result.data || []).map((item) => ({
        id: item.courseId,
        cover: item.cover,
        title: item.courseName,
        desc: item.description,
        teacher: item.teacherName,
        // teacherAvatar: '', // 可后端补充
        subject: item.subject || "",
        level: item.level,
        duration: item.duration + "课时",
        rating: item.rating,
        ratingCount: item.ratingCount,
        students: item.studentCount,
        favorite: false,
      }));
    }
  } catch (e) {
    ElMessage.error("课程数据加载失败");
  }
}

onMounted(fetchCourses);
watch(
  [
    searchQuery,
    selectedSubject,
    selectedLevel,
    selectedDuration,
    sortType,
    currentPage,
  ],
  fetchCourses
);

const pagedCourses = computed(() => courses.value);

function handleSearch() {
  currentPage.value = 1;
  fetchCourses();
}
function handleFilter() {
  currentPage.value = 1;
  fetchCourses();
}
function handleSort() {
  currentPage.value = 1;
  fetchCourses();
}
function handlePageChange(page) {
  currentPage.value = page;
  fetchCourses();
}
function goDetail(course) {
  router.push(`/course/${course.id}`);
}
function toggleFavorite(course) {
  course.favorite = !course.favorite;
}
function shareCourse(course) {
  // 可集成分享API或复制链接
  window.navigator.clipboard.writeText(
    window.location.origin + `/course/${course.id}`
  );
}
</script>

<style scoped>
.course-list-page {
    padding: 20px;
  /* background: #f5f5f5; */
  min-height: 100vh;
  /* padding-bottom: 32px; */
}
.course-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 10px;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  justify-content: space-between;
}
.course-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
.logo {
  font-size: 28px;
  color: #4a90e2;
}
.site-title {
  font-size: 18px;
  color: #333;
  font-weight: bold;
}
.selects {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.search-input {
  width: 240px;
  border-radius: 24px;
  background: #f5f5f5;
}
.filter-item {
  width: 150px;
  border-radius: 16px;
}
.course-grid {
  margin-top: 10px;
}
.course-col {
  padding: 0;
}
.el-card__body {
  padding: 10px;
}
.course-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgba(74, 144, 226, 0.05);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  box-shadow: 0 8px 32px 0 rgba(74, 144, 226, 0.15);
  transform: translateY(-4px) scale(1.02);
}
.card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #e9eef3;
  min-height: 90px;
}
.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-share {
  position: absolute;
  top: 8px;
  right: 8px;
  gap: 8px;
}
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 26px 6px 26px;
}
.card-title {
  font-size: 15px;
  color: #333;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.teacher-name {
  font-size: 14px;
  color: #666;
  margin-right: 4px;
}
.tag-capsule {
  border-radius: 12px !important;
  font-size: 12px;
  padding: 0 10px;
  background: #f5f5f5;
  color: #4a90e2;
  border: none;
}
.card-desc {
  font-size: 13px;
  color: #666;
  min-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  font-size: 12px;
  color: #999;
}
.card-rate {
  margin-right: 2px;
}
.rate-num {
  color: #4a90e2;
  font-weight: 600;
  margin-left: 2px;
}
.rate-count {
  color: #999;
  font-size: 12px;
}
.info-icon {
  color: #4a90e2;
  margin-left: 8px;
}
.student-num {
  color: #999;
  font-size: 12px;
}
.course-pagination {
  margin: 10px 0 0 0;
  display: flex;
  justify-content: center;
}
@media (max-width: 1200px) {
  .course-grid .el-col {
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
  }
}
@media (max-width: 900px) {
  .course-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 10px 4px;
  }
  .search-input {
    width: 100%;
    min-width: 0;
  }
  .course-grid .el-col {
    max-width: 50%;
    flex: 0 0 50%;
  }
  .course-card {
    min-height: 320px;
  }
}
@media (max-width: 600px) {
  .course-toolbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0 8px 0;
  }
  .course-grid .el-col {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .course-card {
    min-height: 320px;
  }
}
</style>
